<script setup lang="ts">
import { onMounted, ref } from "vue";
import { monaco } from "../monacoEditor/customMonaco";

const props = defineProps({
  modelValue: String,
});

const emit = defineEmits(["update:modelValue"]);

const dom = ref();

let instance: any;

onMounted(() => {
  instance = monaco.editor.create(dom.value, {
    // model: jsonModel,
    language: 'sql',
    tabSize: 2,
    automaticLayout: true,
    scrollBeyondLastLine: false,



  });

  instance.onDidChangeModelContent(() => {
    const value = instance.getValue();
    emit("update:modelValue", value);
  });
});
</script>
<template>
  <div class="editor" ref="dom"></div>
</template>
<style>
.editor {
  /* height: 100%; */
  width: 651px;
  height: 189px;
  border: 1px solid #eee;
}
</style>
